<template>
	<view>
		<!-- 轮播图 -->
		<u-swiper indicatorMode="dot" :indicator="true" :list="list1" height='190'></u-swiper>
		<!-- 三个小图标 -->
		<u-grid  :border="false">
			<u-grid-item v-for="(item,index) in dataList.policyDescList" :key="index">
				<view class="icon-List">
					<image class="icon-img" :src="item.icon" mode=""></image>
					<text class="icon-text">{{item.desc}}</text>
				</view>
			</u-grid-item>
		</u-grid>
		
		<!-- 导航图标 -->
		<u-grid :border="false" col="5">
			<u-grid-item v-for="(item,index) in newDataList" :key="index">
				<image class="nav-img" :src="item.picUrl" mode=""></image>
				<text class="nav-text">{{item.text}}</text>
			</u-grid-item>
		</u-grid>
		
		<!-- 分类区 -->
		<view class="categoryList">
			<view class="categoryItem" v-for="(item,index) in dataList.categoryModule" :key="index">
				<image class="categoryItem-img" :src="item.titlePicUrl" mode=""></image>
				<u-scroll-list>
					<view class="goodsItem" v-for="(itemGood,index) in item.itemList" :key="itemGood.id">
						<image class="goodsItem-img" :src="itemGood.listPicUrl" mode=""></image>
						<text class="goodsItem-text">{{itemGood.name}}</text>
					</view>
				</u-scroll-list>
			</view>
			
		</view>
	</view>
</template>

<script>
export default {
	props:['dataList'],
	data() {
		return {
			list1: [
				'https://yanxuan.nosdn.127.net/static-union/165786962362df63.jpg?type=webp&imageView&quality=75&thumbnail=750x0',
				'https://yanxuan.nosdn.127.net/92fbc6e9325792a8ff4d64fa014b3904.jpg?type=webp&imageView&quality=75&thumbnail=750x0',
				'https://yanxuan.nosdn.127.net/334a2420be0c0873b2e2c15526348603.jpg?type=webp&imageView&quality=75&thumbnail=750x0'
			]
		};
	},
	mounted() {
		// console.log(this.newDataList)
	},
	computed:{
		newDataList(){
			return JSON.parse(JSON.stringify(this.dataList.kingKongModule.kingKongList)).splice(1,10)
		}
	}
};
</script>

<style lang="scss">
	.icon-List{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 8rpx;
		.icon-img{
			width: 46rpx;
			height: 46rpx;
			vertical-align: middle;
		}
		.icon-text{
			font-size: 26rpx;
		}
	}
	.nav-img{
		width: 100rpx;
		height: 100rpx;
	}
	.nav-text{
		font-size: 28rpx;
		 padding: 10rpx 0 20rpx 0rpx;
	}
	.categoryList{
		.categoryItem-img{
			width: 100%;
			height: 370rpx;
			vertical-align: middle;
		}
		.goodsItem{
			margin-right:4rpx;
			
			.goodsItem-img{
				width: 200rpx;
				height: 200rpx;
				vertical-align: middle;
				background-color: #f5f5f5;
			}
			.goodsItem-text{
				font-size: 26rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: pre-wrap;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
		
	}
	
</style>
